<template>
<view class="box" :style="{'background-color': props.bgColor}">
  <view class="header x-space-between" :class="{'x-container': !$empty(props.title)}">
    <view class="title">
      <slot name="title">{{props.title}}</slot>
    </view>
    <view class="tools">
      <slot name="tools"></slot>
    </view>
  </view>
  <slot></slot>
</view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  bgColor: {
    type: String,
    default: "#ffffff"
  },
})

const clazz = computed(() => {
  // 默认是get
  return x.a.b;
});

</script>

<style scoped lang="less">
.box {
  .header {
    .title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
    }
  }
}
</style>
